<template>
    <div class="singer">
       <Scroll class="singer-content" :data="map" ref="scroll">
           <div>
               <div v-for="item of map" :key="item.title">
                <div class="title" :ref="item.title">{{item.title}}</div>
                <ul>
                <li v-for="data of item.data" :key="data.Fsinger_mid"  @click="selectItem(data)">
                    <img v-lazy="data.imgSrc" alt="">{{data.Fsinger_name}}
                    </li>
               </ul>
               </div>
           </div>
       </Scroll>
       <div class="charlist">
           <ul>
               <li v-for="item of char" :key="item" @click="handlechar"
                @touchstart.prevent="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd">{{item}}</li>
           </ul>
       </div>
       <router-view></router-view>
    </div>
</template>
<script>
import {getSingerList}  from 'api/singer'; 
import {ERR_OK}  from 'api/config'; 
import Scroll from 'base/scroll/scroll'
import { mapMutations } from 'vuex';
const TITLE="热门"
const LENGTH=10
const HOT="热"
export default {
    data(){
        return{
            singers:[],
            map:[],
            touchStatus: false,
            TITLE:"热门",
        }
    },
    computed:{
       char(){
           let char=[]
           for (const item of this.map) {
               if(item.title==TITLE){
                   char.push(HOT)
               }
               else{
                   char.push(item.title)
               }
           }
           return char
       } 
    },
    components:{
      Scroll  
    },
    methods:{
        _getSingers(){
           getSingerList().then((res)=>{
               if(res.code==ERR_OK){
                this.singers=res.data.list
                this._normalizeSingers()
               }
           }) 
        },
        _normalizeSingers(){
            let map={
                hot:{
                   title:TITLE,
                   data:[]
                }
                
            }
            this.singers.forEach((item,index) => {
                    if(index<LENGTH){
                        map.hot.data.push(item)
                    }
                    if(!map[item.Findex]){
                    map[item.Findex]={
                        title:item.Findex,
                        data:[]
                    }
                   map[item.Findex].data.push(item) 
                   }
                   else{
                    for (const key in map) {
                        if(item.Findex==key){
                            map[key].data.push(item)
                        }
                    }
                   }
            });
        //    console.log(map)
        let ret=[]
        let hot=[]
        for (const key in map) {
            if(map[key].title.match(/[A-Z]/)){
                ret.push(map[key])
            }
            else if(map[key].title==TITLE){
                hot.push(map[key])
            }
        }
        ret.sort((a,b)=>{
            return a.title.charCodeAt(0)-b.title.charCodeAt(0)
        })
        map=hot.concat(ret)
        this.map=map
        this.map.forEach(element => {
              element.data.forEach(item => {
                  item.imgSrc="https://y.gtimg.cn/music/photo_new/T001R300x300M000"+item.Fsinger_mid+".jpg?max_age=2592000"
              });
          });
        },
        handlechar(e){
          let charC=e.target.innerText
          if(charC=="热"){
             var ele = document.getElementsByClassName("title")[0]
          }else{
            var ele = this.$refs[charC][0]     
          }
          this.$refs.scroll.scrollToElement(ele)
        },
        handleTouchStart(){
            this.touchStatus = true
        },
        handleTouchMove(e){
            if (this.touchStatus) {
                if (this.timer) {
                clearTimeout(this.timer)
                }
                this.timer = setTimeout(() => {
                    console.log(e.touches[0].clientY)
                const touchY = e.touches[0].clientY
                const index = Math.floor((touchY - 168) / 16)
                console.log(index)
                if (index >= 0 && index < this.char.length) {
                    if(index==0){
                     var ele = document.getElementsByClassName("title")[0]
                    }
                    else{
                     var ele=this.$refs[this.char[index]][0]
                    }
                    this.$refs.scroll.scrollToElement(ele)
                }
                }, 16)
            }
        },
        handleTouchEnd(){
            this.touchStatus = false
        },
        selectItem(data){
            console.log(data)
            this.$router.push({path:`singer/${data.Fsinger_mid}`})
            this.setSinger(data)
        },
        ...mapMutations({
            setSinger:'SET_SINGER'
        })
    },
    created(){
        this._getSingers()
    }
}
</script>
<style lang="stylus" scoped>
.singer{
    position fixed
    top 88px
    bottom 0
    width 100%
    .singer-content{
        height: 100%
        overflow: hidden
        background #f2f3f4
        .title{
            height 20px
            font-size 11px
            line-height 20px
            background #dadbdc
            padding-left 10px
            color white
        }
        ul{
           li{
            font-size 14px
            height 60px
            line-height 60px
            background #f2f3f4
            border-bottom 1px solid #f4f5f6
            border-top 1px solid #e1e2e3
            margin 0px 10px
            color black
            &:first-child{
                border-top 0
            }
            img{
                width 50px
                height 50px
                border-radius 3px
                line-height 60px
                vertical-align middle
                margin-right 20px
                }
            }
        }
        
    } 
    .charlist{
        position fixed
        right 3px
        top 160px
        display flex
        flex-direction column
        text-align center
        color #757577
        li{
           height 16px
           font-size 10px
        }
    }  
}
</style>